<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    
</head>
<body>

    <!--导航栏-->
    <div class="nav">
        <img src="image/log1.png" alt="">
        <span>我的博客系统</span>
        <!--这个div仅用于占位-->
        <div class="zhan"></div>

        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>

    <!--页面主体-->
    <div class="container">
        <!--左侧信息-->
        <div class="container-left">

            <!--左侧用户信息-->
            <div class="card">

                <!--头像-->
                <img src="image/头像.png" alt="">

                <!--用户名-->
                <h3>小比特</h3>

                <a href="#">github地址</a>

                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span>2</span>
                    <span>1</span>
                </div>

            </div>

        </div>
        <!--右侧信息-->
        <div class="container-right">
            
            <!--标题-->
            <h3 class="title">我的第一篇博客</h3>
            <!--日期-->
            <div class="data">2023-2-10</div>
            <!--内容-->
            <div class="content">
                <p>
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                </p>
                <p>
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                </p>
                <p>
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                    从今天起,我要认真敲代码. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa corrupti voluptatum dolore rerum doloribus officiis incidunt rem quasi magnam aperiam iste cum nostrum, et totam voluptate nam. Nemo, numquam.
                </p>
                
            </div>

        </div>
    </div>
</body>
</html>